<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p{
				font-size: 20px;
			}
			/*
			 * 伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）
			   伪元素的使用：：开头
			   ::firsst-letter表示第一个字母
			   ::first-line   表示第一行
			   ::selection    表示选中的文字
			   ::before       表示元素的开始
			   ::after        表示元素的最后
			   	注意：before和after必须结合content属性来使用,标签的开始位置和结束位置，使用挺多的
			   			典型的：<q>hello</q>短引用自动加的双引号就是通过after和before来加的
			 */
			p::first-letter{
				font-size: 30px;
			}
			p::first-line{
				background-color: yellow;
			}
			p::selection{
				background-color: pink;
				color: blue;
			}
			div::before{
				content: "123";
				color: #0000FF;	
						}
			div::after{
				content: "123";
				color: yellowgreen;	
						}
		</style>
		
		
	</head>
	<body>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque impedit nemo optio ducimus accusantium ipsa tenetur adipisci repudiandae maxime a alias numquam inventore ullam at omnis itaque odit! Accusamus qui.</p>
		<div>Hello Hello Hello！How are you？</div>
	
	
	
	</body>
</html>
